<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>https://codepen.io/prvnbist/pen/gKParr</title>
    <style>
        body {
            background: linear-gradient(45deg, lch(90 2.22 62.5) 80%, lch(78 2.15 94.43) 100%);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        h1 {
            font-family: 'Source Code Pro', monospace;
            font-weight: 900;
            font-size: calc(20vw + 0.5rem);
            white-space: nowrap;

            color: lch(76 39.21 9.23 / 0.5);
            text-transform: uppercase;
            transform: skew(10deg) rotate(-10deg);
            text-shadow: 1px 4px 6px lch(90 2.22 62.5), 0 0 0 lch(28 26.21 12.27), 1px 4px 6px lch(90 2.22 62.5);

            &::before {
                content: attr(data-heading);
                position: absolute;
                left: 0;
                top: -4.8%;
                overflow: hidden;
                height: 50%;
                color: lch(97 2.19 62.49);
                transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);
                text-shadow: 2px -1px 6px rgba(0,0,0,0.2);
            }

            &::after {
                content: attr(data-heading);
                position: absolute;
                left: 0;
                color: lch(83 2.26 62.51);
                transform: translate(0, 0) skew(13deg) scale(1, 0.8);
                clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
                text-shadow: 2px -1px 6px lch(0 0 0 / 0.3);
            }
        }
    </style>
</head>
<body type="pug">
<h1 contenteditable data-heading="Folded">Folded</h1>

<script>
    // JS for content editable trick from Chris Coyier

    var h1 = document.querySelector("h1");

    h1.addEventListener("input", function() {
        this.setAttribute("data-heading", this.innerText);
    });
</script>
</body>
</html>